<template>
  <!-- tooltip-effect="dark" -->
  <div class="materialTable">
    <el-table ref="multipleTable" :data="tableData" style="width: 100%"
      @selection-change="(e)=>selectChange(e,tableHead.selection)" :row-key="tableHead.keyId" :row-class-name="boldFun"
      :border="tableHead.border" :empty-text="tableHead.noDataText">
      <el-table-column type="selection" width="44" align="center" v-if="tableHead.selection">
      </el-table-column>
      <el-table-column type="index" :width="tableHead.order.width" align="center" label="序号" v-if="tableHead.order">
      </el-table-column>
      <el-table-column show-overflow-tooltip v-for="(item, index) in tableHead.data" :width="item.width" :key="index" :label="item.name"
        :prop="item.key" header-align="center" :align="item.align?item.align:'left'"
        :class-name="item.prompt?'message':''" style="position:relative;">
        <template slot-scope="scope">
          <span class="btn_list fr" v-if="item.file||item.fileText">
            <span class="edit" @click="editFun(scope,item.key)" v-if="scope.$index!=switchs&&!item.noSet"></span>
            <span class="save" @click="saveFun(item.file.updateFun,scope,item.key)"
              v-if="item.file&&scope.$index==switchs"></span>
            <span class="save" @click="saveFun(item.fileText.updateFun,scope,item.key)"
              v-if="item.fileText&&scope.$index==switchs"></span>
            <span class="eliminate" @click="eliminateFun(scope.row)" v-if="scope.$index==switchs"></span>
          </span>
          <span class="tip_area">
            <span v-if="item.dbFun && item.filter" @dblclick="forwards(item.dbFun,scope.row)"
              style="cursor:pointer; ">{{item.filter[scope.row[item.key]]}}</span>
            <span v-else-if="item.filter">{{item.filter[scope.row[item.key]]}}</span>
            <span v-else-if="item.filter_plus"
              :style="{color:item.filter_plus[scope.row[item.key]].color}">{{item.filter_plus[scope.row[item.key]].con}}
            </span>
            <span v-else-if="item.fun" @click="forwards(item.fun,scope.row)"
              style="cursor:pointer; color:#458afb;">{{scope.row[item.key]}}</span>
            <span v-else-if="item.dbFun" @dblclick="forwards(item.dbFun,scope.row)"
              style="cursor:pointer; color:#458afb;">{{scope.row[item.key]}}</span>

            <span v-else-if="item.url">
              <router-link :to="{ name: item.url, params: scope.row}"
                :style="{width:'100%',height:'100%',display:'block',color:item.color}">
                {{scope.row[item.key]}}
              </router-link>
            </span>
            <span v-else-if="item.urlSkip" @click="jumps(item.urlSkip,scope.row)"
              :style="{cursor:'pointer',color: scope.row[item.key]==0? '':item.color ,textDecoration:'underline'}">{{scope.row[item.key]}}</span>
            <span v-else-if="item.file" class="fileName file">
              <span class="file_name_icon"
                :style="{background:'url('+require('../../assets/img/'+scope.row.fileIcon+'.png')+') center no-repeat'}"></span>
              <span v-if="scope.$index!=switchs&&scope.row.nodeType==2" @dblclick="forwards(item.file.readFun,scope.row)">{{scope.row[item.key]}}</span>
              <span @click="forwards(item.file.clickFun,scope.row)"
                v-if="scope.$index!=switchs&&scope.row.nodeType==1">{{scope.row[item.key]}}</span>

              <input @click.stop="return false;" maxlength="100" v-if="scope.$index==switchs"
                style="width:140px;height:30px;" type="text" v-model="tm_str">

            </span>
            <span v-else-if="item.fileText" class="fileText">
              <span v-if="scope.$index!=switchs">{{scope.row[item.key]}}</span>
              <input v-if="scope.$index==switchs" style="width:140px;height:30px;" maxlength="100" type="text"
                v-model="tm_str">

            </span>
            <span v-else-if="item.input">
              <input style="width:140px;height:30px;" type="text" v-model="scope.row[item.key]"
                @blur="forwards(item.input.blur,scope.row)" :placeholder="item.input.placeholder">
            </span>
            <span v-else-if="item.inputFilter" class="tree_select">
              <treeselect v-model="scope.row[item.key]" :options="treeData" placeholder="请选择" />
            </span>
            <span v-else :style="{color:item.color,fontSize:item.fontSize+'px' }">{{scope.row[item.key]}}</span>
          </span>

        </template>
      </el-table-column>
      <el-table-column :width="tableHead.operation_width?tableHead.operation_width+'px':''" align="center"
        v-if="tableHead.setFunction" label="操作">
        <template slot-scope="scope">
          <span v-for="(item, index) in tableHead.setFunction" :key="index"
            v-if="!tableHead.forbiddenParent||!scope.row.children">
            <template v-if="item.hideKey">
              <el-button v-if="item.hideState && item.hideState==scope.row[item.hideKey]" size="mini"
                @click.native="forwards(item.fun,scope)" :style="{color:item.color}">
                {{item.name}}
              </el-button>
              <el-button v-if="item.showState && item.showState!=scope.row[item.hideKey]" size="mini"
                @click.native="forwards(item.fun,scope)" :style="{color:item.color}">
                {{item.name}}
              </el-button>
            </template>
            <template v-else>
              <el-button size="mini" @click.native="forwards(item.fun,scope)"
                :style="{color:item.color,'margin':'4px'}">{{item.name}}
              </el-button>
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column :width="tableHead.check.operation_width?tableHead.check.operation_width+'px':''" align="center"
        v-if="tableHead.check" label="权限操作">
        <template slot-scope="scope">
          <span v-for="(item, index) in tableHead.check" :key="index">
            <el-checkbox v-model="scope.row[item.id]" @change.native="forwards(item.fun,scope)"></el-checkbox>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.tree_select{
  position: absolute;
  left:0;
  top:7px;
  margin-right:10px;
}
</style>

<style lang="scss">
  .materialTable * {
    overflow: visible !important;
  }

  .materialTable {
    width: 100%;
  }

  .materialTable {
    .el-table tr.el-table__row:hover {
      box-shadow: 0px -2px 2px #eff5fe inset, 0px 2px 2px #eff5fe inset;
      box-sizing: border-box;
    }

    .el-table tr.el-table__row td {
      background: none;
    }

    .el-table .bold_class .message span {
      position: relative;
    }

    .el-table .bold_class .message span::before {
      color: #f00;
      transform: scale(1.2);
      content: "●";
      line-height: 100%;
      height: 100%;
      position: absolute;
      left: -14px;
      bottom: -1px;

    }

    .el-icon-arrow-right:before {
      color: #458afb;
      font-weight: bold;
    }

    .fileName {
      position: relative;
      padding-left: 50px;
      cursor: pointer;
    }

    .fileText {
      position: relative;
      padding-left: 50px;
      cursor: pointer;
    }

    .file_name_icon {
      position: absolute;
      left: 10px;
      top: -2px;
      width: 28px;
      height: 40px;
      margin-top: -10px;
      display: block;
      background-size: 24px auto;
      // content: url("../../assets/img/file_img.png");
    }

    .btn_list {
      position: relative;
      z-index: 5;
      height: 30px;
      line-height: 30px;
      ;
    }

    .btn_list span {
      padding: 15px 37px;
      cursor: pointer;
    }

    .el-table .cell.el-tooltip .tip_area {
      white-space: nowrap;
      height: 30px;
      line-height: 30px;
    }

    .el-table td,
    .el-table th {
      padding: 10px 0;
    }

    .el-table th>.cell {
      font-size: 12px;
      font-weight: 400;
    }

    .el-table .cell.el-tooltip .tip_area {
      font-size: 14px;
      color: #303133;
    }

    .el-table .cell.el-tooltip {
      overflow: hidden !important;
    }
  }

</style>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    data() {
      return {
        switchs: null,
        tm_str: "新建文件夹",
        value: [],
        chooseList: []
      }
    },
    components: {
      Treeselect
    },
    watch: {
      tableData: {
        handler(newName, oldName) {
          this.switchs = this.tableHead.switchs;
          if (this.tableHead.switchs === null) {
            this.tm_str = "新建文件夹";
          }
          if (this.tableHead.selection) {

            this.selectChange(null, this.tableHead.selection);
          }
        },
        immediate: true,
        deep: true
      }

    },
    methods: {
      selectChange(data, fun) {
        if (data) {
          this.chooseList = data;
        }
        if (fun) {
          fun.fun(this.chooseList)
        }
      },
      forwards(fun, scope) {
        fun(scope)
      },
      jumps(names, parData) {
        const {
          href
        } = this.$router.resolve({
          name: names,
          query: {
            id: parData.projectId
          }
        })
        window.open(href, '_blank');
      },
      boldFun({
        row,
        rowIndex
      }) {
        if (this.tableHead.boldKey) {
          if (row[this.tableHead.boldKey] == this.tableHead.boldStatus) {
            return "bold_class";
          }
        }

      },
      editFun(scope, name) {

        this.switchs = scope.$index;
        this.tm_str = scope.row[name];
      },
      saveFun(fun, scope, key) { //更改提交
        // this.switchs = null;
        this.tableData[scope.$index][key] = this.tm_str;
        fun(scope.row);
      },
      eliminateFun(data) {
        if (data.newNode === true) {
          this.tableHead.switchs = null;
          this.tableData.splice(0, 1);
        } else {
          this.switchs = null;
        }
        this.tm_str = "新建文件夹";
      }

    },
    props: ['tableHead', 'tableData', 'treeData']
  }

</script>
